<template>
    <div class="captcha" v-html="svg" @click="refresh"></div>
  </template>
  
  <script>
  import { getCaptcha } from "@/api/login";
  import request from "@/utils/request"
  
  export default {
    data() {
      return {
        captchaId: "",
        svg: "",
      };
    },
  
    methods: {
      refresh() {
        getCaptcha().then((result) => {
          console.log("result", result);
          this.captchaId = result.captchaId;
          this.svg = result.data;
        });
      },
    },
  
    created() {
      this.refresh();
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .captcha {
    margin-left: 10px;
    width: 140px;
    height: 36px;
    cursor: pointer;
    background-color: green;
  
    :deep(svg) {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  </style>
  